<template>
  <div class="businessQuillEditorForm">
    <el-form ref="EditorForm" :model="formData" :rules="formRules" class="editor-form" :disabled="formDisabled">
      <el-row>
        <el-col
            v-for="(item,index) in formEle"
            v-show="item.isshow"
            :key="index"
            :span="24"
            :style="item.type == 'textarea'||item.type =='editor'||item.type =='upload'||item.type =='imgList'||item.type =='multipleselect' ||item.type =='selectPic'||item.type =='slot'||item.type =='imgUploadList'||item.type =='fileUploadList'||item.type =='multiplePicDialog'||item.type=='videoUploadList'?'minHeight:55px;':'height:55px;minHeight:55px;'"
            class="form-item"
        >
          <div v-if="item.key!='range'&&item.key!='allDay'"
               class="form-label" :style="{width:labelWidth}">
            <i v-if="item.required">*</i><span>{{ item.label }}</span>
          </div>
          <!--图片上传-->
          <el-form-item v-if="item.type == 'upload'" :prop="item.key">
            <BcUpload
                type="image"
                upload-disk-path="test"
                accept="image/jpeg, image/png"
                :disabled="formDisabled"
                :data-bind="formData"
                :path-bind="item.key"
                :name-bind="item.picName?item.picName:'picName'"
                :max="item.max"
            />
          </el-form-item>

          <!--图片列表上传-->
          <el-form-item v-else-if="item.type == 'picList'" :prop="item.key" style="min-height: 55px">
            <div style="display: flex;flex-wrap: wrap">
              <u
                  v-for="(name,index) in formData[item.key]?formData[item.key].split(','):[]"
                  :key="index"
                  class="picList_btn"
                  @click="filePreview(formData[item.key],index)"
              >{{ name.split('-')[1] }}</u>
              <el-button type="primary" v-if="!formDisabled" @click="uploadPicList(item.key,item.multiple)">点击上传</el-button>
            </div>
            <BcUpload
                :ref="item.key"
                type="image"
                upload-disk-path="test"
                accept="image/jpeg, image/png"
                style="display: none;"
                :multiple="item.multiple"
                :data-bind="formData"
                :path-bind="item.key"
                :name-bind="item.picName?item.picName:'picName'"
            />
          </el-form-item>
          <!--图片弹窗上传-->
          <el-form-item v-else-if="item.type == 'picDialog'" :prop="item.key">
            <u
                v-for="(name,index) in formData[item.key]?formData[item.key].split(','):[]"
                :key="index"
                class="picList_btn"
                @click="filePreview(formData[item.key],index)"
            >{{ name.split('-')[1] }}</u>
            <!-- <u v-if="!formDisabled" class="picList_btn" @click="hindlePicDialog(item.key,item.Secondary)">点击上传</u> -->
             <el-button type="primary" v-if="!formDisabled" @click="hindlePicDialog(item.key,item.Secondary)">点击上传</el-button>
          </el-form-item>
          <!--多图片弹窗上传-->
          <el-form-item v-else-if="item.type == 'multiplePicDialog'" :prop="item.key">

            <div class="img-item" v-for="(item,index) in formData[item.key]?formData[item.key].split(','):[]">
              <el-image :src="ftpDownload + item" fit="cover" class="img"></el-image>
              <div class="delete" @click="fileDelete(index)" v-if="!formDisabled">
                <img src="../../assets/images/delImg.png" alt="">
              </div>
            </div>
            <img v-if="!formDisabled&&((formData[item.key]?formData[item.key].split(','):[]).length<item.max)"
                 src="../../assets/images/upload.png" alt="点击选择文件" class="add-image"
                 @click="hindlePicDialog(item.key,item.Secondary)">
          </el-form-item>
          <!--多图片回显-->
          <el-form-item v-else-if="item.type == 'imgList'" :prop="item.key">
            <BcUpload
                type="image"
                accept="image/jpeg, image/png"
                :disabled="formDisabled"
                :data-bind="formData"
                :path-bind="item.key"
                name-bind="picName"
                multiple
            />
          </el-form-item>
          <!--图片列表上传-->
          <el-form-item v-else-if="item.type == 'imgUploadList'" :prop="item.key" style="min-height: 50px">
            <BcUpload
                type="image"
                upload-disk-path="test"
                accept="image/jpeg, image/png"
                :disabled="formDisabled"
                :data-bind="formData"
                :path-bind="item.key"
                name-bind="picName"
                :max="item.max"
                :multiple="true"
                :show-file-list="item.showFileList"
            />
          </el-form-item>
          <!--文件列表上传-->
          <el-form-item v-else-if="item.type == 'fileUploadList'" :prop="item.key" style="min-height: 50px"
                        class="file-upload-list">
            <BcUpload
                type="file"
                upload-disk-path="test"
                :disabled="formDisabled"
                :data-bind="formData"
                :path-bind="item.key"
                :name-bind="item.fileName"
                :max="item.max"
                :accept="item.accept"
                :multiple="item.single ? false : true"
                :show-file-list="item.showFileList"
            />
          </el-form-item>
          <!--视频列表上传-->
          <el-form-item v-else-if="item.type == 'videoUploadList'" :prop="item.key" style="min-height: 50px">
            <BcUpload
                type="video"
                upload-disk-path="test"
                :disabled="formDisabled"
                :data-bind="formData"
                :path-bind="item.key"
                :name-bind="item.fileName"
                :max="item.max"
                accept="video/mp4,video/AVI,video/wma,video/rmvb,video/rm,video/flash,video/mid,video/3GP"
                :multiple="false"
            />
            <span style="color: #D90606">{{item.message}}</span>
          </el-form-item>
          <!--评价五星-->
          <el-form-item v-else-if="item.type == 'rate'" :prop="item.key" style="min-height: 50px">
            <el-rate
                v-model="formData[item.key]"
                show-text>
            </el-rate>
          </el-form-item>
          <!--富文本-->
          <el-form-item v-else-if="item.type == 'editor'" :prop="item.key">
            <quill-editor
                ref="myQuillEditor"
                v-model="formData[item.key]"
                :options="editorOption"
                @change="onEditorChange($event,item.key)"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
            />
            <BcUpload
                ref="uploadBtn"
                type="image"
                code1="editor"
                upload-disk-path="test"
                accept="image/jpeg, image/png"
                style="display: none"
                :multiple="true"
                :data-bind="quillImg"
                path-bind="imgUrl"
                @change="imgHandler"
            />
          </el-form-item>
          <!--地图选择框-->
          <el-form-item v-else-if="item.type == 'map'" :prop="item.key">
            <el-popover
                placement="bottom"
                width="600"
                class="el-input--medium"
                trigger="click"
            >
              <Map v-if="item.key == 'bmfwglDz'" @setAddress="(val) =>{setAddress2(val,item.key)}"/>
              <Map v-else-if="item.key == 'cygsglQydz'"
                   @setAddress="(val) =>{setAddress3(val,item.key)}"/>
              <Map v-else @setAddress="(val) =>{setAddress(val,item.key)}" :lonAndLat="formData['lonAndLat']"/>
              <input
                  slot="reference"
                  v-model="formData[item.key]"
                  type="text"
                  readonly="readonly"
                  :placeholder="item.placeholder"
                  class="el-input__inner"
                  style="cursor: pointer"
              >
            </el-popover>
          </el-form-item>
          <!--选择框-->
          <el-form-item v-else-if="item.type == 'select'" :prop="item.key">
            <el-select
                v-model="formData[item.key]"
                :placeholder="item.placeholder"
                :filterable="item.filterable ? item.filterable : true"
                style="width: 100%"
                :multiple="item.multiple ? true : false"
                :disabled="item.disabled"
                @change="selectLink(formData[item.key],item.key)"
            >
              <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
          <!--多选-->
          <el-form-item v-else-if="item.type == 'multipleselect'" :prop="item.key">
            <el-select v-model="formData[item.key]" multiple :placeholder="item.placeholder"
                       style="width: 100%"
                       :disabled="item.disabled">
              <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--日期时间选择器-->
          <el-form-item v-else-if="item.type == 'DateTime'" :prop="item.key">
            <el-date-picker
                v-model="formData[item.key]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="item.placeholder"
                :disabled="item.disabled"
                autocomplete="off"
                style="width: 100%"
            />
          </el-form-item>
          <!--范围日期时间选择器-->
          <el-form-item v-else-if="item.type == 'daterange'" :prop="item.key">
            <el-date-picker
                v-model="formData[item.key]"
                style="width: 100%"
                type="daterange"
                range-separator="-"
                prefix-icon="-"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            />
          </el-form-item>
          <!--日期选择器-->
          <el-form-item v-else-if="item.type == 'Date'" :prop="item.key">
            <el-date-picker
                v-model="formData[item.key]"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :placeholder="item.placeholder"
                autocomplete="off"
                style="width: 100%"
            />
          </el-form-item>
          <!--时间选择器 带描述-->
          <el-form-item v-else-if="item.type == 'timeDescribe'" :prop="item.key">
            <el-col :span="6">
              <el-input type="text" v-model="item.describe" disabled></el-input>
            </el-col>
            <el-col :span="18">
              <el-time-picker
                  v-model="formData[item.key]"
                  type="time"
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="item.placeholder"
                  autocomplete="off"
                  style="width: 100%"/>
            </el-col>


          </el-form-item>
          <!--时间段范围-->
          <el-form-item v-else-if="item.type == 'timeRange'" :prop="item.key">
            <el-time-picker
                is-range
                v-model="formData[item.key]"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :key="formData.allDay ? formData.allDay : 0"
                :disabled="formData.allDay ? formData.allDay : false"
                format='HH:mm'
                value-format="HH:mm"
                :placeholder="item.placeholder">
            </el-time-picker>


          </el-form-item>
          <!--数字输入框-->
          <el-form-item v-else-if="item.type == 'number'" :prop="item.key">
            <el-input
                v-model="formData[item.key]"
                autocomplete="off"
                :placeholder="item.placeholder"
                :disabled="item.disabled"
                onkeyup="value=value.replace(/[^\d]/g,'')"
            >
              <template slot="append">人</template>
            </el-input>
          </el-form-item>
          <!--不可修改的纯文字-->
          <el-form-item v-else-if="item.type == 'text'" :prop="item.key" style="height:55px">
            <template>
              <p class="text">{{ formData[item.key] }}</p>
            </template>
          </el-form-item>
          <!--级联选择器-->
          <el-form-item v-else-if="item.type == 'Cascader'" :prop="item.key">
            <el-cascader
                v-model="formData[item.key]"
                @change="handleChange"
                :key="item.options.length"
                :options="item.options"
                :props="item.props?{ checkStrictly: true,value:item.props.value, label: item.props.label,children: item.props.children} : { checkStrictly: true}"
                :clearable="false"
            />
<!--            <el-cascader-->
<!--                v-model="formData[item.key]"-->
<!--                :options="item.options"-->
<!--                :props="item.props?{ value:item.props.value, label: item.props.label,children: item.props.children} : { checkStrictly: true}"-->
<!--                :clearable="false"-->
<!--                @change="handleChange($event,item.key)"-->
<!--            />-->
          </el-form-item>

          <!--文本域输入框-->
          <el-form-item v-else-if="item.type == 'textarea'" :prop="item.key">
            <el-input
                v-model="formData[item.key]"
                type="textarea"
                :placeholder="item.placeholder"
                :maxlength="item.maxlength?item.maxlength:''"
                :disabled="item.disabled?item.disabled: false"
                autocomplete="off"
                autosize
                class="el_textarea"
            />
          </el-form-item>
          <!-- radio 单选框 -->
          <el-form-item v-else-if="item.type == 'radio'" :prop="item.key">

            <el-radio-group v-model="formData[item.key]">
              <el-radio v-for="item in item.options" :key="item.value" :label="item.value">{{
                  item.label
                }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!--密码输入框-->
          <el-form-item v-else-if="item.type == 'password'" :prop="item.key">
            <el-input
                v-model="formData[item.key]"
                @change="passwordChange"
                type="password"
                show-password
                :placeholder="item.placeholder"
                autocomplete="off"
                :maxlength="item.maxlength?item.maxlength:''"
                :disabled="item.disabled"
                auto-complete="new-password"
            />
          </el-form-item>
          <el-form-item v-else-if="item.type == 'checkbox'" :prop="item.key">
            <el-checkbox
                v-model="formData[item.key]"
                @change="changeCheckbox($event,item.key)"
                :disabled="item.disabled"
            >
              {{ item.label }}
            </el-checkbox>


          </el-form-item>
          <!-- 图片选择器 -->
          <el-form-item v-else-if="item.type == 'selectPic'" :prop="item.key">
            <el-radio-group class="selectPic" v-model="formData[item.key]">
              <el-radio v-for="imglist in selectImg" :label="imglist.p2">
                <img :src="ftpDownload + imglist.p2">
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-else-if="item.type == 'slot'" :prop="item.key">
            <slot name="slot" :row="formData" :options="item.options?item.options:[]" :itemKey="item.key" :item="item"/>
          </el-form-item>
          <el-form-item v-else-if="item.type == 'tree'" :prop="item.key">
            <!-- 树图 -->
            <BcTree ref="searchTree" :show-checkbox="false"
                    :highlight-current=true :placeholder="'请选择'+item.label" :params="treeParams"
                    :echo="formData[item.name]"
                    @handleNodeClick="handleNodeClick"/>
          </el-form-item>
          <!--input输入框-->
          <el-form-item v-else :prop="item.key">
            <el-input
                v-model="formData[item.key]"
                :placeholder="item.placeholder"
                autocomplete="off"
                :maxlength="item.maxlength?item.maxlength:''"
                :disabled="item.disabled"
                auto-complete="new-password"
            >

            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--图片上传弹窗-->
    <el-dialog title="图片上传" :visible.sync="picDialog.visible" width="60%" @closed="closedPicDialog">
      <PicUpload ref="picDialogBox" :key="picDialog.key" :piclx="piclx" :pic-dialog="picDialog" @save="savePicDialog"/>
    </el-dialog>

    <!-- 图片预览 -->
    <image-viewer
        v-if="view.visible"
        :z-index="9999"
        :initial-index="view.initialIndex"
        :on-close="closeViewer"
        :url-list="view.previewSrcList"
    />
  </div>

</template>
<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'
import BcUpload from '@/components/BcUpload/index'
import BcTree from '@/components/BcTree/index'
import Map from './Map'
import ImageViewer from 'element-ui/packages/image/src/image-viewer'
import PicUpload from './picUpload'

export default {
  name: 'BusinessQuillEditorForm',
  components: { BcUpload, Map, ImageViewer, PicUpload, BcTree,quillEditor},
  props: {
    formEle: {
      type: Array,
      default() {
        return []
      }
    },
    formRules: {
      type: Object,
      default() {
        return {}
      }
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    labelWidth: {
      type: String,
      default: ''
    },
    formDisabled: {
      type: Boolean,
      default: false
    },
    piclx: {
      type: Number,
      default: 0
    },
    islistform: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    treeParams: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      // picList:[],//多图片上传
      picDialog: {
        Secondary: '',
        visible: false,
        key: '',
        path: '',
        name: ''
      },
      ftpDownload: this.$store.getters.ftpInfo ? this.$store.getters.ftpInfo.download : 'http://172.16.1.54:3001',
      disabled: false,
      quillImg: {},
      view: {
        initialIndex: 0,
        visible: false,
        previewSrcList: []
      },
      selectImg: [],
    }
  },
  computed: {
    editorOption() {
      return this.formDisabled ? {modules: {toolbar: []}} : {}
    },
  },
  watch: {
    formData: {
      handler: function (val) {
        this.formData = val
      },
      deep: true,
      immediate: true
    },
    formParams: {
      handler: function (val) {
        this.formParams = val
      },
      deep: true,
      immediate: true
    },
    formEle: {
      handler: function (val) {
        this.formEle = val
      },
      deep: true,
      immediate: true
    },
    formRules: {
      handler: function (val) {
        this.formRules = val
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    var that = this
    if (this.$refs.myQuillEditor) {
      // myQuillEditor改成自己的图片上传
      this.$refs.myQuillEditor[0].quill.getModule('toolbar').addHandler('image', function (state) {
        if (state) that.$refs.uploadBtn[0].$refs.imageInputMultiple.click()
      })
    }
  },
  created() {
  },
  methods: {
    clear(){
      this.formRules.bzzxcdJdsp={}
      //this.$refs.EditorForm.clearValidate('bzzxcdJdsp')


    },
    reset() {
      this.formRules.kcglHylx={}
    },
    // 删除
    fileDelete(index) {
      this.$confirm('删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = []
        if (this.formData.stationUrl.indexOf(',') == -1) {
          data.push(this.formData.stationUrl)
        } else {
          data = this.formData.stationUrl.split(',')
        }
        data.splice(index, 1);
        this.formData.stationUrl = data ? data.join(',') : ''
        this.$forceUpdate()
      }).catch(err => {

      });
    },
    closedPicDialog() {
      this.picDialog = {
        visible: false,
        key: '',
        path: '',
        name: ''
      }
      this.$refs.picDialogBox.active = -1
      this.$refs.picDialogBox.cshimgurl()
    },
    savePicDialog() {
      //阵地管理 站点照片多张上传
      if (this.picDialog.key === 'stationUrl') {
        this.formData[this.picDialog.key] += ',' + this.picDialog.path
        if (this.formData[this.picDialog.key].charAt(0) === ',') {
          this.formData[this.picDialog.key] = this.formData[this.picDialog.key].substring(1, this.formData[this.picDialog.key].length)
        }
      } else {
        this.$set(this.formData, this.picDialog.key, this.picDialog.path)
      }
      this.$refs.EditorForm.validateField(this.picDialog.key)
      this.picDialog.visible = false
      this.$refs.picDialogBox.cshimgurl()
    },
    hindlePicDialog(key, num) {
      this.picDialog.key = key
      this.picDialog.visible = true
      this.picDialog.Secondary = num
    },
    // 预览图片
    filePreview(url, index) {
      this.view.visible = true
      if (url) {
        const previewSrcList = []
        const arr = url.split(',')
        arr.forEach(item => {
          previewSrcList.push(this.ftpDownload + item)
        })
        this.view.previewSrcList = previewSrcList
        this.view.initialIndex = index
      }
    },
    // 关闭预览图片
    closeViewer() {
      this.view.visible = false
    },
    // 图片列表上传事件
    uploadPicList(itemKey, multiple) {
      if (multiple) {
        this.$refs[itemKey][0].$refs.imageInputMultiple.click()
      } else {
        this.$refs[itemKey][0].$refs.imageInput.click()
      }
    },
    // 富文本图片上传处理
    imgHandler(param) {
      if (!this.$refs.myQuillEditor[0].quill) return
      const imgUrlArr = param.imgUrl.split(',')
      const selection = this.$refs.myQuillEditor[0].quill.getSelection()
      // 获取quill的光标，插入图片
      this.$refs.myQuillEditor[0].quill.insertEmbed(selection != null ? selection.index : 0, 'image', this.ftpDownload + imgUrlArr[imgUrlArr.length - 1])
      // 插入完成后，光标往后移动一位
      this.$refs.myQuillEditor[0].quill.setSelection(selection.index + 1)
    },
    setAddress(val, key) {
      this.formData[key] = val
      if (this.formData.lonAndLat) {
        const address = val.split('-')
        this.formData.addressStr = address[0]
        this.formData.lonAndLat = address[1]
      }
      this.$forceUpdate()
      this.$refs.EditorForm.validateField(key)
    },
    setAddress2(val, key) {
      this.formData[key] = val
      this.$refs.EditorForm.validateField(key)
      const address = val.split('-')
      this.formData[key] = address[0]
      const jwd = address[1].split(',')
      this.formData.bmfwglDzjd = jwd[0]
      this.formData.bmfwglDzwd = jwd[1]
    },
    setAddress3(val, key) {
      this.formData[key] = val
      this.$refs.EditorForm.validateField(key)
      const address = val.split('-')
      this.formData[key] = address[0]
      const jwd = address[1].split(',')
      this.formData.cygsglJd = jwd[0]
      this.formData.cygsglWd = jwd[1]
    },
    // 富文本事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
      if (this.formDisabled) quill.enable(false)
    },
    onEditorFocus(quill) {
      if (this.formDisabled) quill.enable(false)
    },
    onEditorReady(quill) {
      console.log('editor ready!', quill)
      if (this.formDisabled) quill.enable(false)
    },
    onEditorChange({quill, html, text}, key) {
      this.formData[key] = html
    },
    handleChange(e) {
      // this.formData[key] = val[val.length - 1]
      this.$emit('handleCascader', e)
    },
    getData() {
      // this.formData['treeId'] = this.$store.getters.userInfo.departmentList[0].departmentId
      // console.log("🚀 ~ file: index.vue ~ line 766 ~ getData ~ this.formData", this.formData)
      return this.$refs.EditorForm.validate().then(valid => {
        if (valid) return this.formData
      })
    },
    clearvalidate() {
      this.$refs.EditorForm.clearValidate()
    },
    resetfields() {
      this.$refs.EditorForm.resetFields()
    },
    handleSelect(val, key, formIndex) {
      this.$emit('handleSelect', {val, key, formIndex})
    },

    selectLink(val, key) {
      this.$emit('selectLink', {val, key})

      this.$forceUpdate()
    },
    //checkbox change事件
    changeCheckbox(val, key) {
      this.$emit('changeCheckbox', {val, key})
      this.$forceUpdate()
    },
    //tree 节点点击事件
    handleNodeClick(data1) {
      this.$emit('handleNodeClick', data1)
    },
    //password输入框触发
    passwordChange(e){
      this.$emit('passwordChange', e)
    }
  }
}
</script>
<style scoped lang="scss">
.businessQuillEditorForm{
  .editor-form {

    .picList_btn {
      font-size: 16px;
      color: #335DFF;
      cursor: pointer;
      height: 36px;
      line-height: 36px;
      display: inline-block;
    }

    .form-item {
      display: flex;

      .form-label {
        width: 18%;
        // padding-right: 30px;
        font-size: 16px;
        color: #16163A;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        justify-content: end;

        i {
          color: #ff4949;
        }
      }

      ::v-deep .el-form-item {
        flex: 1;
        margin-bottom: 0;
        padding: 9px 12px;
        .el-cascader{
          width: 100%;
        }
      }

      ::v-deep .el-input__inner {
        border-radius: 3px;
        letter-spacing: 1px;
      }

      ::v-deep .el-textarea__inner {
        border: none;
        border-radius: 0;
        background: #F5F5F5;
        letter-spacing: 1px;
        resize: none;
      }
      ::v-deep .el-input.is-disabled{
        background: #f5f7fa;
      }
      ::v-deep .el-input.is-disabled .el-input__inner {
        background: transparent;
        cursor: default;
        color: #000000;
      }

      ::v-deep .el-textarea.is-disabled .el-textarea__inner {
        background: transparent;
        cursor: default;
        color: #000000;
      }

      ::v-deep .is-disabled {
        input::placeholder {
          font-size: 0;
        }

        textarea::placeholder {
          font-size: 0;
        }

        .el-input__suffix {
          display: none;
        }
      }

      ::v-deep .el-form-item__error {
        background: #fff;
      }

      ::v-deep .el_textarea {
        textarea {
          min-height: 100px !important;
        }
      }

    }

    // 图片上传
    ::v-deep .el-upload--picture-card {
      width: 90px;
      height: 90px;
      line-height: 94px;
      background: #F5F5F5;
    }

    // 富文本
    ::v-deep .ql-toolbar.ql-snow {
      border: none;
    }

    ::v-deep .ql-container.ql-snow {
      border: none;
    }

    ::v-deep .ql-editor {
      background: #F5F5F5;
      min-height: 230px;
    }

    // 时间范围选择
    ::v-deep .el-range-input {
      background: #F5F5F5;
    }
  }
  ::v-deep .el-input-group__append{
    background: #F5F5F5;
    border: none;
  }
  .text {
    padding-left: 18px;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 370px;
    white-space: nowrap;
  }

  .el-button--text p {
    text-align: left;
  }

  .selectPic .el-radio__label img {
    width: 100px;
    height: 75px;
  }

  .editor-form .form-item .form-label {
    text-align: right !important;
    justify-content: end !important
  }


  .add-image {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 1px solid #E1E1E1;
    border-radius: 3px;
  }

  .img-item {
    width: 100px;
    height: 100px;
    border-radius: 3px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow: 1px 0px 5px 2px rgba(0, 0, 0, .2);
    position: relative;
    cursor: pointer;

    &:hover {
      .opera {
        visibility: visible;
        opacity: 1;
      }
    }

    .img {
      width: 100%;
      height: 100%;
    }

    .delete {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;

      img {
        width: 100%;
      }
    }
  }

}

</style>
